component.faq

faq

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed. Sed nibh metus, sodales non porttitor non, euismod ut magna. Etiam viverra pharetra facilisis. Aenean augue risus, molestie eu semper at, ornare at velit. Maecenas erat dui, placerat sed facilisis at, laoreet at ligula. Maecenas eu rutrum lacus. Curabitur at turpis ligula. Phasellus pharetra tellus in augue viverra id vehicula eros pretium. Donec consectetur mattis lorem, eget dictum lectus tristique vel. Ut vehicula consequat mi at fringilla.
Quisque porttitor elit ac mauris aliquam sollicitudin. Nam imperdiet ligula et dolor pulvinar consequat. Sed in turpis id erat vehicula gravida. Nunc sed mauris ante. Pellentesque at convallis dolor. Nulla pharetra risus ut neque consequat in dapibus est feugiat. Fusce dapibus adipiscing lectus, a fringilla odio dictum et. Quisque eu tortor lacus. In elementum posuere dapibus. Duis ut neque nisi, vel vulputate dolor. Donec sem est, ultricies nec auctor vel, iaculis lobortis metus.
Vivamus eros tortor, consequat sed posuere non, tempus non ligula. Integer pharetra sem eu dolor rhoncus euismod. Vestibulum fermentum sollicitudin augue eu porta. In quis magna elit, in congue urna. Vivamus vitae blandit nisi. Aliquam lacinia magna eget lorem auctor vel facilisis ante rhoncus. Nulla ut sapien sit amet justo molestie tincidunt ut mollis lacus. Sed at felis lorem. Nam tincidunt vehicula ipsum, in aliquet turpis tempor et. Donec lacinia, nulla et tincidunt fringilla, turpis nulla sodales quam, sed viverra magna eros quis ipsum. Pellentesque vulputate gravida sodales. Fusce pulvinar vestibulum malesuada. Suspendisse eget lectus sit amet lacus tincidunt fringilla. Donec posuere neque risus, non viverra justo.
Etiam suscipit leo tincidunt mi volutpat commodo. Morbi tempor interdum dictum. In hac habitasse platea dictumst. Morbi quis turpis sed felis mattis tempus vel vitae nibh. In feugiat consectetur felis et sodales. Aliquam gravida elit nec augue mattis ut mollis nibh eleifend. Aliquam vulputate pulvinar libero et pellentesque. Vivamus hendrerit varius metus quis congue. Ut scelerisque tincidunt aliquam.
Payments tab content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante est, tempor ut posuere nec, venenatis sed arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis in purus ut mauris sodales sollicitudin. Mauris cursus imperdiet dignissim. Phasellus risus felis, rutrum in laoreet vel, posuere vel dolor. Sed venenatis vehicula tempus. Nam at rutrum enim. Sed massa quam, mattis in viverra ut, ullamcorper et massa. Phasellus sapien diam, faucibus ac tempor a, condimentum quis est. Donec nec velit ante, vel mattis metus. Ut nec libero diam, id auctor sapien. Suspendisse eget lorem ante, in fringilla dui. In hac habitasse platea dictumst.

Support tab content

Integer porttitor, enim eu egestas ullamcorper, odio mauris semper quam, in facilisis dui ligula eget ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dolor leo, consectetur nec tristique pretium, ornare quis purus. Nullam pulvinar, enim eu molestie venenatis, turpis nisl vehicula eros, et ultricies risus urna sed diam. Suspendisse potenti. Nullam tincidunt tellus nisi. Aenean felis eros, congue vitae hendrerit id, mattis quis mi.

Features tab content

Nunc aliquet lacus laoreet odio consectetur tempus. In id nisl diam, congue vehicula sapien. Nulla facilisi. Donec sagittis cursus sollicitudin. Aenean leo tellus, eleifend quis facilisis vel, tempus ac elit. Nam eget turpis nec erat vestibulum fringilla. Donec et felis ipsum. Fusce feugiat ultricies lacus a ultrices. Nunc ultrices, orci ut convallis pulvinar, diam nunc tincidunt augue, sit amet lacinia ante mi a augue. Sed feugiat, neque eget porttitor varius, tellus nisi sollicitudin libero, nec aliquam ante dui gravida ipsum. Fusce cursus rhoncus lectus, quis malesuada sapien facilisis eu. Aenean vitae massa sed urna condimentum porttitor ac at risus.

<!-- Widget -->
<div class="widget widget-tabs widget-tabs-double-2 widget-tabs-gray">

	<!-- Widget heading -->
	<div class="widget-head">
		<ul>
			<li class="active"><a class="glyphicons list" href="#tabAll" data-toggle="tab"><i></i><span>All topics</span></a></li>
			<li><a class="glyphicons user" href="#tabAccount" data-toggle="tab"><i></i><span>Account</span></a></li>
			<li><a class="glyphicons credit_card" href="#tabPayments" data-toggle="tab"><i></i><span>Payments</span></a></li>
			<li><a class="glyphicons cogwheel" href="#tabSupport" data-toggle="tab"><i></i><span>Technical Support</span></a></li>
			<li><a class="glyphicons snowflake" href="#tabFeatures" data-toggle="tab"><i></i><span>Features</span></a></li>
		</ul>
	</div>
	<!-- // Widget heading END -->
	
	<div class="widget-body">
		<div class="tab-content">
		
			<!-- Tab content -->
			<div id="tabAll" class="tab-pane active">
				<div class="panel-group accordion accordion-2" id="accordion">
					
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title"><a class="accordion-toggle glyphicons font" data-toggle="collapse" data-parent="#accordion" href="#collapse-1"><i></i>What is Lorem Ipsum?</a></h4>
					    </div>
					    <div id="collapse-1" class="panel-collapse collapse in">
					      	<div class="panel-body">
					        	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					      	</div>
					    </div>
				  	</div>
				  	<div class="panel panel-default">
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons circle_question_mark" data-toggle="collapse" data-parent="#accordion" href="#collapse-2"><i></i>Why do we use it?</a></h4>
					    </div>
					    <div id="collapse-2" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
					      	</div>
					    </div>
				  	</div>
				  	<div class="panel panel-default">
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons flag" data-toggle="collapse" data-parent="#accordion" href="#collapse-3"><i></i>Where does it come from?</a></h4>
					    </div>
					    <div id="collapse-3" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
								<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
					      	</div>
					    </div>
				  	</div>
				  	<div class="panel panel-default">
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons download_alt" data-toggle="collapse" data-parent="#accordion" href="#collapse-4"><i></i>Where can I get some?</a></h4>
					    </div>
					    <div id="collapse-4" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
					      	</div>
					    </div>
				  	</div>
				</div>
			</div>
			<!-- // Tab content END -->
			
			<!-- Tab content -->
			<div id="tabAccount" class="tab-pane">
			
				<!-- Accordion -->
				<div class="panel-group accordion accordion-2" id="tabAccountAccordion">
					
					<!-- Accordion Group -->
					<div class="panel panel-default">
					
						<!-- Heading -->
						<div class="panel-heading">
							<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-1-1"><i></i>Lorem ipsum dolor sit amet?</a></h4>
					    </div>
					    <!-- // Heading END -->
					    
					    <!-- Body -->
					    <div id="collapse-1-1" class="panel-collapse collapse in">
					      	<div class="panel-body">
					        	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed. Sed nibh metus, sodales non porttitor non, euismod ut magna. Etiam viverra pharetra facilisis. Aenean augue risus, molestie eu semper at, ornare at velit. Maecenas erat dui, placerat sed facilisis at, laoreet at ligula. Maecenas eu rutrum lacus. Curabitur at turpis ligula. Phasellus pharetra tellus in augue viverra id vehicula eros pretium. Donec consectetur mattis lorem, eget dictum lectus tristique vel. Ut vehicula consequat mi at fringilla.
					      	</div>
					    </div>
					    <!-- // Body END -->
					    
				  	</div>
				  	<!-- // Accordion Group END -->
				  	
				  	<!-- Accordion Group -->
				  	<div class="panel panel-default">
				  	
				  		<!-- Heading -->
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-2-1"><i></i>Quisque porttitor elit ac mauris?</a></h4>
					    </div>
					    <!-- // Heading END -->
					    
					    <!-- Body -->
					    <div id="collapse-2-1" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	Quisque porttitor elit ac mauris aliquam sollicitudin. Nam imperdiet ligula et dolor pulvinar consequat. Sed in turpis id erat vehicula gravida. Nunc sed mauris ante. Pellentesque at convallis dolor. Nulla pharetra risus ut neque consequat in dapibus est feugiat. Fusce dapibus adipiscing lectus, a fringilla odio dictum et. Quisque eu tortor lacus. In elementum posuere dapibus. Duis ut neque nisi, vel vulputate dolor. Donec sem est, ultricies nec auctor vel, iaculis lobortis metus.
					      	</div>
					    </div>
					    <!-- // Body END -->
					    
				  	</div>
				  	<!-- // Accordion Group END -->
				  	
				  	<!-- Accordion Group -->
				  	<div class="panel panel-default">
				  	
				  		<!-- Heading -->
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-3-1"><i></i>Vivamus eros tortor consequat sed?</a></h4>
					    </div>
					    <!-- // Heading -->
					    
					    <!-- Body -->
					    <div id="collapse-3-1" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	Vivamus eros tortor, consequat sed posuere non, tempus non ligula. Integer pharetra sem eu dolor rhoncus euismod. Vestibulum fermentum sollicitudin augue eu porta. In quis magna elit, in congue urna. Vivamus vitae blandit nisi. Aliquam lacinia magna eget lorem auctor vel facilisis ante rhoncus. Nulla ut sapien sit amet justo molestie tincidunt ut mollis lacus. Sed at felis lorem. Nam tincidunt vehicula ipsum, in aliquet turpis tempor et. Donec lacinia, nulla et tincidunt fringilla, turpis nulla sodales quam, sed viverra magna eros quis ipsum. Pellentesque vulputate gravida sodales. Fusce pulvinar vestibulum malesuada. Suspendisse eget lectus sit amet lacus tincidunt fringilla. Donec posuere neque risus, non viverra justo.
					      	</div>
					    </div>
					    <!-- // Body END -->
					    
				  	</div>
				  	<!-- // Accordion Group END -->
				  	
				  	<!-- Accordion Group -->
				  	<div class="panel panel-default">
				  	
				  		<!-- Heading -->
					    <div class="panel-heading">
					      	<h4 class="panel-title"><a class="accordion-toggle glyphicons right_arrow" data-toggle="collapse" data-parent="#tabAccountAccordion" href="#collapse-4-1"><i></i>Etiam suscipit leo tincidunt mi volutpat?</a></h4>
					    </div>
					    <!-- // Heading END -->
					    
					    <!-- Body -->
					    <div id="collapse-4-1" class="panel-collapse collapse">
					    	<div class="panel-body">
					        	Etiam suscipit leo tincidunt mi volutpat commodo. Morbi tempor interdum dictum. In hac habitasse platea dictumst. Morbi quis turpis sed felis mattis tempus vel vitae nibh. In feugiat consectetur felis et sodales. Aliquam gravida elit nec augue mattis ut mollis nibh eleifend. Aliquam vulputate pulvinar libero et pellentesque. Vivamus hendrerit varius metus quis congue. Ut scelerisque tincidunt aliquam.
					      	</div>
					    </div>
					    <!-- // Body END -->
					    
				  	</div>
				  	<!-- // Accordion Group END -->
				  	
				</div>
			</div>
			<!-- // Tab content END -->
			
			<!-- Tab content -->
			<div id="tabPayments" class="tab-pane widget-body-regular">
				<h5>Payments tab content</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante est, tempor ut posuere nec, venenatis sed arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis in purus ut mauris sodales sollicitudin. Mauris cursus imperdiet dignissim. Phasellus risus felis, rutrum in laoreet vel, posuere vel dolor. Sed venenatis vehicula tempus. Nam at rutrum enim. Sed massa quam, mattis in viverra ut, ullamcorper et massa. Phasellus sapien diam, faucibus ac tempor a, condimentum quis est. Donec nec velit ante, vel mattis metus. Ut nec libero diam, id auctor sapien. Suspendisse eget lorem ante, in fringilla dui. In hac habitasse platea dictumst.</p>
			</div>
			<!-- // Tab content END -->
			
			<!-- Tab content -->
			<div id="tabSupport" class="tab-pane widget-body-regular">
				<h5>Support tab content</h5>
				<p>Integer porttitor, enim eu egestas ullamcorper, odio mauris semper quam, in facilisis dui ligula eget ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dolor leo, consectetur nec tristique pretium, ornare quis purus. Nullam pulvinar, enim eu molestie venenatis, turpis nisl vehicula eros, et ultricies risus urna sed diam. Suspendisse potenti. Nullam tincidunt tellus nisi. Aenean felis eros, congue vitae hendrerit id, mattis quis mi.</p>
			</div>
			<!-- // Tab content END -->
			
			<!-- Tab content -->
			<div id="tabFeatures" class="tab-pane widget-body-regular">
				<h5>Features tab content</h5>
				<p>Nunc aliquet lacus laoreet odio consectetur tempus. In id nisl diam, congue vehicula sapien. Nulla facilisi. Donec sagittis cursus sollicitudin. Aenean leo tellus, eleifend quis facilisis vel, tempus ac elit. Nam eget turpis nec erat vestibulum fringilla. Donec et felis ipsum. Fusce feugiat ultricies lacus a ultrices. Nunc ultrices, orci ut convallis pulvinar, diam nunc tincidunt augue, sit amet lacinia ante mi a augue. Sed feugiat, neque eget porttitor varius, tellus nisi sollicitudin libero, nec aliquam ante dui gravida ipsum. Fusce cursus rhoncus lectus, quis malesuada sapien facilisis eu. Aenean vitae massa sed urna condimentum porttitor ac at risus.</p>
			</div>
			<!-- // Tab content END -->
			
		</div>
	</div>
</div>
<!-- // Widget END -->

Code

@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "http://localhost/shared/components/modules/admin/widgets/accordions/assets/less/accordions.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.